<!-- 
 * @description: 标签弹窗
 * @fileName: dialogmark.vue 
 * @author: xp 
 * @date: 2022-09-09 09:28:24
-->
<template>
  <div class="b-dialog-mark">
    <el-dialog :title="dataForm.title" :visible.sync="isDialogShow" :close-on-click-modal="false" @close="handleCancel('close')">
        <div v-if="dataForm.searchName">
          <el-input style="width: 360px;" v-model="searchValue" :visible.sync="isDialogShow" @keyup.enter.native="handleSearch" placeholder="请输入标签名称"></el-input>
          <b-button-new text="重置" hollow @click="handleClear" style="margin-left: 16px;"></b-button-new>
          <b-button-new text="搜索" @click="handleSearch" style="margin-left: 16px;"></b-button-new>
        </div>
        <div class="tags-wrapper">
          <span>当前已选</span>
          <div class="tags-content">
            <el-tag
              v-for="item in chooseTagLists"
              :key="item[dataForm.value]"
              closable
              @close="handleItemDel(item)">
              {{item[dataForm.name]}}
            </el-tag>
          </div>
        </div>
        <div :style="{ borderBottom: '1px solid rgba(240, 240, 240, 1)', margin: `${chooseTagLists.length>0?20:24}px 0 24px` }"></div>
        <div class="table-wrapper">
          <div class="table-content">
            <template  v-if="tableData.length > 0">
              <span 
                :class="['table-item', { 'isChoosed fontTheme': isChoosed(item[dataForm.value]) }]" 
                v-for="item in tableData" 
                :key="item[dataForm.value]" 
                @click="() => handleItemChoose(item)">
                  {{item[dataForm.name]}}
                <i v-if="isChoosed(item[dataForm.value])" class="selected-icon iconfont icon-a-bianzu3"></i>
              </span>
            </template>
            <div v-else style="width: 100%; text-align: center; color: #666;">暂无数据</div>
          </div>
          <el-pagination
            style="margin-left: 0 !important; padding-left: 0 !important;"
            layout="prev, pager, next"
            :total="total"
            :page-size="page.pageSize"
            :current-page.sync="page.pageNum"
            background
            @current-change="handleCurrentChange">   
          </el-pagination>
        </div>
        <span slot="footer">
          <b-button-new text="取消" @click="handleCancel('cencel')"></b-button-new>
          <b-button-new text="确定" @click="handleConfirm"></b-button-new>
        </span>
    </el-dialog>
    
  </div>
</template>
<script>
import '@/styles/btn.scss';
import _axios from '@/api/axios';
const initPara = () => ({
  pageSize: 20,
  pageNum: 1
})
export default {
  name: 'dialogmark',
  props: {
    dataForm: {
      type: Object,
      default() {
        return {
          title: '', // 标题
          name: '', // 展示用的name
          value: '', // 唯一表示的value
          chooseTagLists: [], // 选中的item
          searchName: 'name', // 搜索条件
        }
      }
    },
    // 最大个数
    max: [String, Number],
  },
  data () {
    return {
      isDialogShow: false,
      searchValue: '', // 搜索字段值
      chooseTagLists: [], // 已选列表
      tableData: [],// 数据列表
      total: 0, // 总条数
      currentIndex: 0, /// 当前currentIndex
      page: initPara(),
    }
  },
  computed: {
    isChoosed() {
      return function (val) {
        return this.chooseTagLists.findIndex(item => val === item[this.dataForm.value]) != -1;
      }
    }
  },
  watch: {
    isDialogShow(newV, oldV) {
      if (newV) {
        this.chooseTagLists = JSON.parse(JSON.stringify(this.dataForm.chooseTagLists)) || []
        this.page.pageNum = 1
        this.searchValue = ''
        this.init()
      }
    }
  },
  methods: {
    init() {
      if (this.dataForm.url) {
        const params = {
          ...this.page,
          ...this.dataForm.query
        }
        params[this.dataForm.searchName] = this.searchValue || ''
        _axios({
            method: this.dataForm.method || 'post',
            url: this.dataForm.url,
            data: params
        }).then(res => {
          this.tableData = res.list || [];
          this.total = parseInt(res.pageInfo.total);
        }).catch(err => console.log(err))
      }
    },
    // 重置
    handleClear() {
      this.searchValue = ''
      this.handleCurrentChange(1)
    },
    // 搜索
    handleSearch() {
      this.handleCurrentChange(1)
    },
    // 表格选择
    handleItemChoose(row) {
      const { value } = this.dataForm
      // 当前选中数量大于限制最大数量
      console.log(this.chooseTagLists, this.max);
      if (this.chooseTagLists.length >= parseInt(this.max)) {
        this.$message.warning('最多选择'+this.max+'个')
        return
      } else {
        if (this.isChoosed(row[value])) {
          this.chooseTagLists.splice(this.chooseTagLists.findIndex(item => item[value] == row[value]), 1)
        } else {
          this.chooseTagLists.push(row)
        }
      }
    },
    // 删除选中标签
    handleItemDel(row) {
      const { value } = this.dataForm
      this.chooseTagLists.splice(this.chooseTagLists.findIndex(item => item[value] == row[value]), 1)
    },
    // 改变当前页
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.init()
    },
    // 弹窗确定
    handleConfirm() {
      let selectedKeys = []
      this.chooseTagLists.map(item => {
        selectedKeys.push(item[this.dataForm.value])
      })
      // 判断限制选中数量
      if (this.max && parseInt(this.max) > 0 && selectedKeys.length > parseInt(this.max)) {
        this.$message.warning('最大只能选择'+ this.max+'个')
        return
      }
		if(selectedKeys.length==0){
			this.$message.error('请选择标签')
			return
		}
      this.isDialogShow = false
      this.$emit('confirm', { selectedRows: this.chooseTagLists, selectedKeys  })
    },
	
	// 弹出框取消
	handleCancel(type){
		this.isDialogShow = false
		this.$emit('cancel',type)
	}
	
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
@import "@/styles/_handle.scss";
@import "@/styles/_themes.scss";
.table-wrapper{
  .table-content{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-bottom: 10px;
    .table-item{
      position: relative;
      padding: 0 16px;
      height: 32px;
      line-height: 30px;
      border: 1px solid rgba($color: #000000, $alpha: .3);
      border-radius: 3px;
      margin: 0 8px 8px 0;
      cursor: pointer;
    }
    .isChoosed{
	    @include border_color('colorTheme');
    }
    .selected-icon{
      position: absolute;
      font-size: 20px;
      bottom: -6px;
      right: -1px;
	    @include font_color('colorTheme');
    }
  }
}
.tags-wrapper{
  margin-top: 24px;
  >span {
    margin-right: 10px;
  }
  .tags-content{
    display: inline;
  }
}
</style>
<style lang="scss">
.b-dialog-mark{
  .el-pagination.is-background .btn-prev{
    margin-left: 0 !important;
  }
}
</style>